<template>
  <ContentWrap :title="title">
    <div class="app-container">
      <Search
        ref="search"
        :schema="schema"
        :model="queryParam"
        :is-col="false"
        layout="inline"
        :showSearch="true"
        button-position="left"
        :search-loading="loading"
        :reset-loading="loading"
        @search="handleSearch"
        @reset="handleSearch"
      />
    </div>
    <Table :data="files" :columns="columns" :pagination="paging" @change="load">
      <template #File="e">
        <fileShow
          :file-name="e.row.FileName"
          :file-uri="e.row.FileUri"
          style="max-width: 200px; max-height: 120px"
        />
      </template>
      <template #FileName="e">
        {{ e.row.FileName }}
      </template>
      <template #FileType="e">
        {{ FileType[e.row.FileType].text }}
      </template>
      <template #FileSize="e">
        {{ formatFileSize(e.row.FileSize) }}
      </template>
      <template #SaveType="e">
        {{ FileSaveType[e.row.SaveType].text }}
      </template>
      <template #SaveTime="e">
        {{ $formatTime(e.row.SaveTime, 'yyyy-MM-dd HH:mm') }}
      </template>
    </Table>
  </ContentWrap>
</template>

<script>
import * as fileApi from '@/api/file/fileList'
import fileShow from '@/components/file/fileShow.vue'
import { FileEnumDic, FileType, FileSaveType } from '@/config/fileConfig'
import { Table } from '@/components/Table'
import { Search } from '@/components/Search'
import { useIcon } from '@/hooks/web/useIcon'
export default {
  components: {
    fileShow,
    Table,
    Search
  },
  data() {
    return {
      FileType,
      FileSaveType,
      FileEnumDic,
      loading: false,
      files: [],
      queryParam: {
        Queryfield: null,
        FileType: null,
        SaveType: null,
        Begin: null,
        End: null
      },
      schema: [
        {
          field: 'QueryKey',
          label: '文件名',
          component: 'Input',
          componentProps: {
            placeholder: '文件名'
          }
        },
        {
          field: 'FileType',
          label: '文件类型',
          component: 'EnumItem',
          componentProps: {
            sysHead: 'file',
            dicKey: FileEnumDic.fileType,
            placeholder: '文件类型',
            multiple: true
          }
        },
        {
          field: 'SaveType',
          label: '文件保存方式',
          component: 'EnumItem',
          componentProps: {
            sysHead: 'file',
            dicKey: FileEnumDic.fileSaveType,
            placeholder: '文件保存方式',
            multiple: true
          }
        }
      ],
      columns: [
        {
          field: 'File',
          label: '文件',
          slotName: 'File',
          align: 'center',
          width: 200
        },
        {
          sortby: 'FileName',
          field: 'FileName',
          label: '文件名',
          slotName: 'FileName',
          align: 'left',
          minWidth: 150,
          sortable: 'custom'
        },
        {
          field: 'FileMd5',
          label: '文件MD5',
          align: 'center',
          width: 320
        },
        {
          sortby: 'FileType',
          field: 'FileType',
          label: '文件类型',
          align: 'center',
          slotName: 'FileType',
          width: 120,
          sortable: 'custom'
        },
        {
          sortby: 'FileSize',
          field: 'FileSize',
          label: '文件大小',
          align: 'center',
          slotName: 'FileSize',
          minWidth: 100,
          sortable: 'custom'
        },
        {
          field: 'FileNum',
          label: '文件引用数',
          align: 'right',
          width: 120
        },
        {
          sortby: 'SaveType',
          field: 'SaveType',
          label: '保存方式',
          align: 'center',
          width: 120,
          slotName: 'SaveType',
          sortable: 'custom'
        },
        {
          field: 'SaveTime',
          label: '添加时间',
          align: 'center',
          minWidth: 120,
          slotName: 'SaveTime'
        }
      ],
      paging: {
        pageSize: 20,
        total: 0,
        currentPage: 1
      }
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    reset() {
      this.queryParam.QueryKey = null
      this.queryParam.FileType = null
      this.queryParam.SaveType = null
      this.load()
    },
    handleSearch(data) {
      this.queryParam.QueryKey = data.QueryKey
      this.queryParam.FileType = data.FileType
      this.queryParam.SaveType = data.SaveType
      this.load()
    },
    formatFileSize(size) {
      size = parseInt(size)
      let t = 1024 * 1024 * 1024
      let num = Math.floor(size / t)
      let str = ''
      if (num !== 0) {
        str = num + 'GB '
        size = size % t
      }
      t = 1024 * 1024
      num = Math.floor(size / t)
      if (num !== 0) {
        str = str + num + 'MB '
        size = size % t
      }
      t = 1024
      num = Math.floor(size / t)
      if (num !== 0) {
        str = str + num + 'KB '
        size = size % t
      }
      if (size !== 0) {
        str = str + size + 'B'
      }
      return str
    },
    async load(curPaging) {
      if (curPaging == null) {
        curPaging = {
          Size: this.paging.pageSize,
          Index: 1,
          SortName: 'Id',
          IsDesc: true
        }
        this.paging.currentPage = 1
      }
      const res = await fileApi.Query(this.queryParam, curPaging)
      this.files = res.List
      this.paging.total = res.Count
    }
  }
}
</script>
